<template>
	<div id="root" :class="'root-' + $route.name">
		<template v-if="$route.name == 'login'">
			<router-view></router-view>
		</template>
		<template v-else>
			<div class="root-header">
				<page_header />
			</div>
			<div class="root-inner">
				<div class="root-left scrollbar">
					<page_menu />
				</div>
				<div class="root-right">
					<div class="root-right-breadcrumb">
						<page_breadcrumb />
					</div>

					<div class="root-right-inner">
						<router-view></router-view>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
	import page_header from "@/components/page/page_header.vue";
	import page_menu from "@/components/page/page_menu.vue";
	import page_breadcrumb from "@/components/page/page_breadcrumb.vue";
	import {
		mapState
	} from "vuex";
	export default {
		components: {
			page_header,
			page_menu,
			page_breadcrumb,
		},
		data() {
			return {};
		},
		created() {
			let token = localStorage.getItem("token");
			if (!token && this.$route.name != 'login') {
				this.$router.push('/login')
				return
			} else {
				this.$store.dispatch("appInit", {
					callback: this.initCallback
				}); //重新初始化
			}
		},

		methods: {
			initCallback(data) {
				if (data.id) {
					
				} else {
					this.$router.push('/login')
				}
			},
			handleOpen(key, keyPath) {
				console.log("handleOpen", key, keyPath);
			},
			handleSelect(key, keyPath) {
				let key_str = keyPath[keyPath.length - 1];
				let route = this.key_map[key_str];

				console.log("handleSelect key", key);
				console.log("handleSelect keyPath", keyPath);
				console.log("handleSelect route", route);

				// debugger;
				this.$router.push("/" + route);
			},

			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},

			root_click() {
				console.log("点击内容区, 关闭选项弹窗");
				// this.$store.commit('vuex_closePop');
				// this.vuex_closePop();
			},
		},
	};
</script>

<style lang="less">
	* {
		box-sizing: border-box;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	body {
		background-color: #fff;
		font-size: 14px;
		text-align: left;
	}

	#root {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		background: #fff;
		font-size: 12px;

		&.root-login {
			padding-top: 0 !important;
		}

		/*
  height: 100vh;
  overflow-y: scroll;

  */
	}

	/deep/ .van-checkbox__icon--checked .van-icon {
		// background-color: @lh_green;
		// border-color: @lh_green;
	}

	/deep/ .van-checkbox__icon--checked .van-icon {
		// background-color: @lh_green;
		// border-color: @lh_green;
	}

	/deep/ .van-tabs__line {
		// background-color: @lh_green;
	}

	.el-textarea__inner:focus {
		// border-color: #e4393c !important;
	}

	/**用户信息 */
	.page-userinfo {
		.el-radio__input.is-checked .el-radio__inner {
			// background: #e4393c;
			// border-color: #e4393c;
		}

		.el-radio__input.is-checked+.el-radio__label {
			color: #000;
		}
	}

	/*收藏夹 */
	.page-modal-shoucangjia {
		.el-radio__input.is-checked .el-radio__inner {
			// background: #e4393c;
			// border-color: #e4393c;
		}

		.el-radio__input.is-checked+.el-radio__label {
			color: #000;
		}
	}

	.el-radio__input.is-checked .el-radio__inner {
		background: #e4393c !important;
		border-color: #e4393c !important;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: #000 !important;
	}

	.el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #e4393c !important;
	}

	.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #e4393c !important;
	}

	.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background: #e4393c !important;
		border-color: #e4393c !important;
	}

	.pagination-box {
		text-align: center;
	}

	.van-toast {
		z-index: 100000000000000000000000 !important;
	}

	.el-button--primary {}

	.el-button--default:focus,
	.el-button--default:hover {}

	#app .has-emoji img {
		width: 45px;
	}

	.empty {
		min-height: 10vh;
		line-height: 10vh;
		text-align: center;
	}

	a {
		text-decoration: none;
	}
</style>

<style lang="less" scoped>
	#root {
		padding-top: 70px;
	}

	.root-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 70px;
		z-index: 100;
	}

	.root-inner {
		height: calc(100vh - 70px);
		.fbs();
	}

	.root-left {
		width: auto;
		height: calc(100vh - 70px);
		overflow-y: auto;
		background: #313133;
		background: #fff;
		width: 150px;
		width: 210px;
		width: 180px;

		&.scrollbar {
			overflow-y: auto;

			&::-webkit-scrollbar-thumb {
				border-radius: 3px;
				border: 5px solid #409eff;
				background: #fff;
			}

			&::-webkit-scrollbar {
				width: 5px;
				height: 0px;
			}
		}
	}

	.root-right {
		background: #f8f8f8;
		background: #ececec;
		flex: 1;
		height: calc(100vh - 70px);
		overflow-y: auto;

		text-align: left;

		&::-webkit-scrollbar-thumb {
			border-radius: 5px;
			border: 8px solid #409eff;
			background: #fff;
		}

		&::-webkit-scrollbar {
			width: 8px;
			height: 0px;
		}

		.root-right-breadcrumb {
			position: sticky;
			top: 0px;
			z-index: 10;
			padding: 10px;

			// margin-top: -10px;
			// margin-bottom: -10px;
			// margin-left: -10px;
			// margin-right: -10px;
			// padding: 10px;
			background: #ececec;
		}

		.root-right-inner {
			padding: 0 10px;
		}
	}
</style>

<style lang="less">
	.router-link-exact-active {
		color: #409eff;
	}

	// 富文本编辑器
	.tox-tinymce-aux {
		z-index: 100001 !important;
	}

	.tox .tox-dialog-wrap {
		z-index: 110001 !important;
	}
	
	
	.el-table th:last-child {
		text-align: center;
	}
</style>